<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="../libs/css/animate.css">
    <style>


    </style>
</head>
<body>
    <div id="app" >
        <h2 :data-title="msg">{{msg}}</h2>
         <p>
            <input type="text" v-focus  >
         </p>
         <h3 v-color="color" >Are YOu OK - wh2107</h3>
         <div v-my-ho>
             <h2>wuhan2107-daydayup</h2>
         </div>
         <div v-mydemo:click.enter.stop="demo"  >
             Demo - Demo - Demo 
         </div>
         <div v-my-html="tag" v-my-show="flag">

         </div>
         <button @click="flag=!flag">点击切换</button>
         <button v-myon:click.stop="changeFlag">点击切换2</button>

    </div>
    <script>
        // 全局注册指令
        // Vue.directive(name,options)

        // W3C ESLint
        Vue.directive("focus",{
            inserted(el){  
                // el 被操纵的DOM
                el.focus()
                el.style.border="1px solid red";
            }
        })
        Vue.directive("myHo",{
            bind(el){
                el.innerHTML += "hello World"
            },
            inserted(el){

            },
            update(el){

            },
            unbind(el){
                
            }
        })
        Vue.directive("mydemo",{
            bind(el,binding){
                console.log(binding)
                var s = JSON.stringify   // 把对象转成JSON 字符串 
                el.innerHTML =
                'name: '       + s(binding.name) + '<br>' +
                'value: '      + s(binding.value) + '<br>' +
                'expression: ' + s(binding.expression) + '<br>' +
                'argument: '   + s(binding.arg) + '<br>' +
                'modifiers: '  + JSON.stringify(binding.modifiers) + '<br>' ;
            },
            inserted(el,binding){
                el.style.color = "pink"
                el.innerHTML += binding.value 
            }
        })
        Vue.directive("myHtml",{
            bind(el,binding){
                el.innerHTML = binding.value ; 
            }
        })
        Vue.directive("myShow",{
            bind(el,binding){
                el.style.display = binding.value ? 'block':'none'
            },
            update(el,binding){
                el.style.display = binding.value ? 'block':'none'
            }
        })

        Vue.directive("myon",{
            inserted(el,binding){
                console.log(binding)
                el.addEventListener(binding.arg,binding.value,binding.modifiers.stop)
            }
        })

        
        // 封装指令  添加到按钮  v-shuibo  
        // 水波纹
        const vm = new Vue({
            data:{
                msg:"Vue directive 自定义指令",
                color:'deeppink',
                demo:"wh2107-daydayup",
                tag:"<h1>Hello-HTML5</h1>",
                flag:false
            },  
            directives:{  // 局部注册 
                color:{
                    bind(el,binding){
                        // el.style.color = 'red'
                        el.style.color = binding.value 
                        console.log(binding)
                    }
                }
            },
            methods:{
                changeFlag(){
                    this.flag = !this.flag ;
                }
            },
            mounted(){
                document.querySelectorAll("title")[0].innerHTML = this.msg;
            }
        }).$mount("#app")
    </script>
         <!-- 
        Vue 也允许注册自定义指令   操作底层DOM  
        代码复用和抽象的主要形式是组件 (component 讲到这里再说) 

        v-on   v-if   v-show    v-for   v-model v-bind v-else v-once v-text v-html  
        指令目的   作用    操作底层DOM  

        指令 directive  
        v- 开头     驼峰命名 (单词之间  大写字母  变为小写字母 前面加 -  )  newColor   (W3C HTML 不准出现大写字母 )   

        全局定义  Vue.directive(name,{钩子函数})   Vue.filter
        局部定义  directives      filters 

        指令钩子函数   一个指令定义对象可以提供钩子函数 (操作指令的钩子函数 )
        bind   指令第一次绑定到 元素时候调用     进行一些初始化操作   1 
        inserted  插入   被绑定元素插入父节点时调用  1
        update    更新  数据或者DOM节点 更新    n 
        unbind   只调用一次，指令与元素解绑时调用   1

        钩子函数 有几个参数 (el binding )
        el 绑定的DOM
        binding  指令携带的变量数据

        name 指令名
        value 指令的值  最重要  binding.value
        expression  指令对应的表达式 变量名称
        argument   指令的参数     v-on:click  click args   冒号声明的  
        modifiers   指令的修饰符   v-on.stop:click  stop 修饰符   

        v-slot   分发
        v-pre    
        v-cloak  锁住DOM  

     -->

</body>
</html>